<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-10 17:14:38
-->
<template>
  <div class="map-container">
    <MiningMap :center="center" :zoom="zoom">
      <MiningTiandituLayer :ak="key" @ready="ready"></MiningTiandituLayer>
      <MiningVectorLayer :featureStyle="style">
        <MiningPolygon :feature="feature"></MiningPolygon>
        <MiningLineString :feature="featureLine"></MiningLineString>
        <MiningPoint
          v-for="(feature, fi) in features"
          :key="fi"
          :feature="feature"
        ></MiningPoint>
      </MiningVectorLayer>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import MiningPolygon from 'mining-map/Features/Polygon';
import MiningPoint from 'mining-map/Features/Point';
import MiningLineString from 'mining-map/Features/LineString';


import { TiandituKey, CityCoordinates } from '@/config/config.js';

import Feature from 'ol/Feature';
import Polygon from 'ol/geom/Polygon';
import LineString from 'ol/geom/LineString';import Point from 'ol/geom/Point';
import marker from '@/assets/images/marker.png'

import { Style, Stroke as StrokeStyle, Fill as FillStyle,Icon } from 'ol/style';



export default {
  name: 'FeatureMix',
  title: '混合图层',
  parentTitle: 'Feature',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningVectorLayer,
    MiningPolygon,
    MiningLineString,
    MiningPoint
  },
  data () {
    const feature = new Feature({
      type: 'Polygon',
      geometry: new Polygon([[
        // CityCoordinates.BeiJing,
        CityCoordinates.TianJin,
        CityCoordinates.ShangHai,
        CityCoordinates.XiAn
      ]]),
      name: 'AirLine',
    });

    const style = new Style({
      stroke: new StrokeStyle({
        color: 'blue',
        lineDash: [4],
        width: 3,
      }),
      fill: new FillStyle({
        color: 'rgba(0, 0, 255, 0.1)',
      }),
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: marker,
      })
    })

    const featureLine = new Feature({
      geometry: new LineString([
        CityCoordinates.BeiJing,
        // CityCoordinates.TianJin,
        // CityCoordinates.ShangHai,
        CityCoordinates.XiAn
      ]),
      name: 'AirLine',
    });
    
    const features = [ CityCoordinates.BeiJing,  CityCoordinates.ShangHai,  CityCoordinates.XiAn].map(coords => new Feature({
      type: 'Point',
      geometry: new Point(coords),
      name: 'City',
    }));
 
    return {
      feature,
      style,
      featureLine,
      features,
      center: [117.730311, 35.698681],
      zoom: 5,
      key: TiandituKey,
    }
  },
  methods: {
    ready (arg) {
      console.log(arg)
    }
  }

}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
}
</style>